<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from "axios";
import {showToast} from "vant";
const router = useRouter();
const courses = ref([
  {
    vudeoId:0,
    userId:0,
    videoUrl: 1
  },
  // ...其他课程数据...
]);
const avatarUrl=ref('https://gp-kaoyan.oss-cn-shanghai.aliyuncs.com/1718761541534_20220107192759_bd006.jpg')

const loading = ref(false);
const finished = ref(false);
const onClickLeft=()=>{
  router.push('/my')
}
const onLoad =()=>{
  axios({
    method:'get',
    url:'http://localhost:9094/video/findAllVideoCache'
  }).then((data) => {
    console.log(JSON.stringify(data))
    console.log("获取处理器的数据：" + JSON.stringify(data.data))
    var r = data.data;

    // 加载状态结束
    loading.value = false;
    finished.value = true

    if (r.code == 0) {
      showToast("查询成功");
      courses.value = r.data;// 初始化界面

    } else {
      showToast("查询失败");
    }


  })
}
const handleDeleteButtonClick=()=>{
  axios({
    method:'get',
    url:'http://localhost:9094/video/deleteVideoCache',
  }).then((data) => {
    console.log(JSON.stringify(data))
    console.log("获取处理器的数据：" + JSON.stringify(data.data))
    var r = data.data;

    // 加载状态结束
    loading.value = false;
    finished.value = true

    if (r.code == 0) {
      showToast("删除成功");
      courses.value = r.data;// 初始化界面
    }else {
      showToast("删除失败");
    }
  })
}

const handleButtonClick = (vudeoId) => {document.getElementById("playVideo").addEventListener("click", function() {
  window.location.href = "https://www.bilibili.com/video/BV13F4m1j7Cw/";
})}
const handleAddVideoClick=()=>{
  axios({
    method:'get',
    url:'http://localhost:9094/video/addVideoCache',
  }).then((data) => {
    console.log(JSON.stringify(data))
    console.log("获取处理器的数据：" + JSON.stringify(data.data))
    var r = data.data;

    // 加载状态结束
    loading.value = false;
    finished.value = true

    if (r.code == 0) {
      showToast("添加成功");
     courses.value = r.data;// 初始化界面
   }else {
      showToast("添加失败");
   }
 })
}

</script>

<template>
<h1>离 线 缓 存</h1>
  <van-nav-bar
      title="离线缓存"
      left-text="返回"

      left-arrow
      @click-left="onClickLeft"

  />
  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
  >
    <van-cell
        v-for="course in courses"
        :key="course.vudeoId"
        :title="course.userId"

    >
<!--      <template #default>-->
<!--        {{ course.videoUrl }}-->
<!--      </template>-->
      <template #extra>
        <van-button id="playVideo" size="small" type="primary" @click="handleButtonClick(course.vudeoId)">
          点击按钮播放视频
        </van-button>
        <van-button
            size="small"
            type="danger"
            @click="handleDeleteButtonClick(course.vudeoId)"        style="margin-left: 8px;"
        >
        删除
        </van-button>
      </template>

    </van-cell>
  </van-list>

  <van-button
      type="primary"
      block  style="margin-top: 16px;"
      @click="handleAddVideoClick"
  >
    + 添加视频
  </van-button>

<!--<img src="avatarUrl" alt="Avatar"class="avatar" />-->

</template>

<style scoped>

</style>